<template>
  <div :class="{'mobile-detail-wrap mobile-account-detail-wrap':showMobilePage}">
    <div class="account-detail">
      <div class="account-info">
        <div class="account-left">
          <img :src="detailInfo.basicInfo.avatar || userAvatar" class="account-avatar" >
          <div style="flex: 1;max-width: 27vw;" class="mobile-link-info">
            <ToolTip :content="detailInfo.basicInfo.accountName" class="account-name" />
            <div class="link-box">
              <div class="label">微博主页链接：</div>
              <el-tooltip v-if="detailInfo.basicInfo.link" placement="top">
                <div slot="content">{{ detailInfo.basicInfo.link }}</div>
                <a
                  :href="detailInfo.basicInfo.link"
                  class="light-word"
                  target="_blank">
                  {{ detailInfo.basicInfo.link }}
                </a>
              </el-tooltip>
              <span v-else>--</span>
            </div>
          </div>
        </div>
        <div v-if="!showMobilePage" class="divide"/>
        <div class="account-right">
          <el-row>
            <el-col :span="8">
              <img :src="fans" >
              <span class="label">粉丝：</span>
              <span v-if="detailInfo.basicInfo.fans || detailInfo.basicInfo.fans === 0" class="num">{{ detailInfo.basicInfo.fans | numberTextFormat }}</span>
              <span v-else class="num">--</span>
            </el-col>
            <el-col :span="8">
              <img :src="follow" >
              <span class="label">关注：</span>
              <span v-if="detailInfo.basicInfo.follow || detailInfo.basicInfo.follow === 0" class="num">{{ detailInfo.basicInfo.follow | numberTextFormat }}</span>
              <span v-else class="num">--</span>
            </el-col>
            <el-col :span="8">
              <img :src="weiboImg" >
              <span class="label">全部微博：</span>
              <span v-if="detailInfo.basicInfo.num || detailInfo.basicInfo.num === 0" class="num">{{ detailInfo.basicInfo.num | numberTextFormat }}</span>
              <span v-else class="num">--</span>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="data-row">
        <div class="row-item flex3 mobile-row-item-1">
          <div class="data-row-header">
            <Title title="24小时内微博统计" font-size="16px" />
          </div>
          <div class="data-row-content">
            <div class="data-row-item">
              <img :src="cacheTime">
              <span>微博总数</span>
              <span v-if="detailInfo.weiboList.total || detailInfo.weiboList.total === 0" class="number">{{ detailInfo.weiboList.total }}</span>
              <span v-else>--</span>
              <el-button :disabled="!detailInfo.basicInfo.accountName" type="text" class="link-button" @click="goWeiboList()">查看 ></el-button>
            </div>
            <div class="data-row-item">
              <img :src="cacheTime">
              <span>未达标待处理数</span>
              <span v-if="detailInfo.weiboList.underStandard || detailInfo.weiboList.underStandard === 0" class="number">{{ detailInfo.weiboList.underStandard }}</span>
              <span v-else>--</span>
              <el-button :disabled="!detailInfo.basicInfo.accountName" type="text" class="link-button" @click="goWeiboList(1)">查看 ></el-button>
            </div>
            <div class="data-row-item">
              <img :src="cacheTime">
              <span>未达标已处理数</span>
              <span v-if="detailInfo.weiboList.processed || detailInfo.weiboList.processed === 0" class="number">{{ detailInfo.weiboList.processed }}</span>
              <span v-else>--</span>
              <el-button :disabled="!detailInfo.basicInfo.accountName" type="text" class="link-button" @click="goWeiboList(2)">查看 ></el-button>
            </div>
          </div>
        </div>
        <div class="row-item flex1 mobile-row-item-2">
          <div class="data-row-header">
            <Title title="运营人员" font-size="16px" style="flex: unset;" />
            <span v-if="hasRouteAuth('crm:accounts:operator')" class="link set" @click="handleOperation">设置</span>
          </div>
          <AuditorAvatar v-if="detailInfo.accountOperation.length > 0" :user-list="detailInfo.accountOperation" :slice-num="5" />
          <div v-else style="height: 40px;line-height: 40px;">--</div>
        </div>
        <div class="row-item flex1 mobile-row-item-3">
          <div class="data-row-header">
            <Title title="监测状态" font-size="16px" style="flex: unset;" />
          </div>
          <div class="data-row-info" style="height: 40px;">
            <!-- <el-dropdown :hide-on-click="true" :disabled="!hasRouteAuth('crm:accounts:monitor') || !detailInfo.basicInfo.accountName" :class="statusClass(detailInfo.monitoringStatus)" @command="handleMonitoringSet"> -->
            <el-dropdown
              :hide-on-click="true"
              :class="{
                'custom-disabled': !hasRouteAuth('crm:accounts:monitor') || !detailInfo.basicInfo.accountName,
                'monitoring-status': detailInfo.monitoringStatus === 0,
                'stop-status': detailInfo.monitoringStatus === 1,
                '': detailInfo.monitoringStatus === 2
              }"
              @command="handleMonitoringSet">
              <span class="el-dropdown-link">
                {{ statusMap[detailInfo.monitoringStatus] }}<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown" :class="{'custom-disabled': !hasRouteAuth('crm:accounts:monitor') || !detailInfo.basicInfo.accountName,}">
                <el-dropdown-item :command="0">监测</el-dropdown-item>
                <el-dropdown-item :command="1">暂停</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
      <div v-loading="loading">
        <div class="data-row-header" style="display: flex;margin-bottom: 12px;">
          <Title title="健康值" font-size="16px" style="flex: unset;" />
          <span v-if="hasRouteAuth('crm:accounts:health')" class="link set" @click="handleHealth">设置</span>
        </div>
        <u-table
          v-if="detailInfo.healthValue.length > 0"
          ref="customerTableRef"
          :data="detailInfo.healthValue"
          :border="true"
          :row-height="49"
          beautify-table
          header-drag-style
          use-virtual
          class="fb-table"
          element-loading-text="加载中..."
          empty-text="暂无数据"
          header-cell-class-name="order-data-header-cell"
          fit
          hightlight-current-row
        >
          <u-table-column align="left" label="发文时长" min-width="120">
            <template slot-scope="scope">
              <div>发文{{ scope.row.time }}小时内</div>
            </template>
          </u-table-column>
          <u-table-column align="left" label="转发">
            <template slot-scope="scope">
              <ToolTip :class="isWarning(scope.row.id, 'forward') ? 'warning' : ''" :content="scope.row.forward" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="评论">
            <template slot-scope="scope">
              <ToolTip :class="isWarning(scope.row.id, 'comment') ? 'warning' : ''" :content="scope.row.comment" />
            </template>
          </u-table-column>
          <u-table-column align="left" label="点赞">
            <template slot-scope="scope">
              <ToolTip :class="isWarning(scope.row.id, 'like') ? 'warning' : ''" :content="scope.row.like" />
            </template>
          </u-table-column>
        </u-table>
        <empty-placeholder v-else :empty-img="emptyIcon" image-size="120px" style="margin-bottom: 24px" />
      </div>
      <HealthValue ref="healthValueSet" :list="detailInfo.healthValue" @submit="handleHealthValueSet" />
      <accountOperation ref="accountOperation" :list="detailInfo.accountOperation" @submit="handleAccountOperation" />
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import { getAccountDetail, setOperators, setHealthValue, setMonitoring } from '@/api/accounts';
import accountOperation from '../components/accountOperation';
import AuditorAvatar from '@/components/Common/auditProcess/module/auditorAvatar';
import { numberTextFormat } from '@/filters/number';
import cacheTime from '@/assets/cacheTime.png';
import userAvatar from '@/assets/user-avatar.png';
import weiboImg from '@/assets/accounts/weibo.png';
import follow from '@/assets/accounts/follow.png';
import fans from '@/assets/accounts/fans.png';
import { hasRouteAuth } from '@/utils/permission';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import HealthValue from '@/components/HealthValue';
import emptyIcon from '@/assets/home/emptyIcon.png';
import { mapState } from 'vuex';

export default {
  components: {
    Title,
    AuditorAvatar,
    accountOperation,
    EmptyPlaceholder,
    HealthValue
  },
  filters: {
    numberTextFormat
  },
  data() {
    return {
      emptyIcon,
      cacheTime,
      userAvatar,
      weiboImg,
      follow,
      fans,
      accountId: null,
      loading: false,
      detailInfo: {
        basicInfo: {},
        weiboList: {},
        monitoringStatus: 0,
        accountOperation: [],
        healthValue: []
      },
      statusMap: ['监测中', '已暂停']
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.accountId = Number(this.$route.params.id);
    this.fetchData();
  },
  methods: {
    hasRouteAuth,
    fetchData() {
      this.loading = true;
      getAccountDetail(this.accountId).then(res => {
        if (res.code === 200) {
          this.detailInfo = res.data;
          this.loading = false;
        }
      });
    },
    goWeiboList(status) {
      const createTimeStart = Math.round((new Date() - 1000 * 60 * 60 * 24) / 1000);
      const createTimeEnd = Math.round(new Date() / 1000);
      const query = {
        type: 1,
        account: this.detailInfo.basicInfo.accountName,
        createTimeStart,
        createTimeEnd
      };
      query.status = status || null;
      const url = this.$router.resolve({
        name: 'accounts',
        query
      });
      window.open(url.href, '_blank');
    },
    statusClass(status) {
      return {
        0: 'monitoring-status',
        1: 'stop-status',
        2: ''
      }[status];
    },
    handleOperation() {
      this.$refs['accountOperation'].openDialog();
    },
    handleAccountOperation(params) {
      params.ids = String(this.accountId);
      setOperators(params).then(res => {
        if (res.code === 200) {
          this.$refs['accountOperation'].handleClose();
          this.fetchData();
          this.$message.success('操作成功');
        }
      });
    },
    handleMonitoringSet(status) {
      const params = {
        ids: String(this.accountId),
        status
      };
      setMonitoring(params).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功');
          this.fetchData();
        }
      });
    },
    isWarning(id, value) {
      const index = this.detailInfo.healthValue.map(item => item.id).indexOf(id); // 通过id查找在list中的索引
      if (index === 0) return false;
      return this.detailInfo.healthValue[index][value] < this.detailInfo.healthValue[index - 1][value];
    },
    handleHealth() {
      this.$refs['healthValueSet'].openDialog();
    },
    handleHealthValueSet(data) {
      const params = {
        ids: String(this.accountId),
        data
      };
      setHealthValue(params).then(res => {
        if (res.code === 200) {
          this.$message.success('操作成功');
          this.$refs['healthValueSet'].handleClose();
          this.fetchData();
        }
      }).catch(err => {
        this.$message.error(err.message);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.account-detail {
  min-height: calc(100vh - 85px);
  margin: 16px;
  background-color: #fff;
  padding: 20px 24px;
  box-sizing: border-box;
  font-size: 14px;
  .account-info {
    display: flex;
    align-items: center;
    flex-flow: row nowrap;
    margin-bottom: 16px;
    height: 104px;
    padding: 16px 9px;
    background-color: #FAFAFC;
    .divide {
      height: 64px;
      width: 1px;
      background-color: #ddd;
    }
    .account-left {
      flex: 1;
      display: flex;
      align-items: center;
      padding-right: 24px;
      .link-box {
        display: flex;
        a {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .account-avatar {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin-right: 12px;
      }
      .account-name {
        font-weight: bold;
        font-size: 20px;
        color: #333;
      }
    }
    .account-right {
      flex: 1.5;
      line-height: 50px;
      padding: 0 24px;
      .num {
        color: #5F77C3;
        font-weight: bold;
        font-size: 16px;
        font-family: DIN Alternate;
      }
      img {
        width: 14px;
        height: 14px;
        margin-right: 4px;
      }
      &::v-deep {
        .el-col-8 {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .data-row {
    display: flex;
    align-items: flex-start;
    margin: 10px 0 32px;
    padding: 9px 0;
    .row-item {
      height: 100%;
      &.flex1 {
        flex: 1;
      }
      &.flex3 {
        flex: 3;
      }
      .number {
        margin: 0 8px;
      }
      .auditor-avatar-container {
        margin-left: 8px;
      }
      .data-row-header {
        display: flex;
        margin-bottom: 12px;
      }
      .data-row-info {
        display: flex;
        align-items: center;
        &::v-deep {
          .el-dropdown {
            color: #333;
            margin-left: 6px;
            cursor: pointer;
            font-size: 14px;
            line-height: 14px;
            font-family: PingFangSC-Regular;
            &.custom-disabled{
              cursor: not-allowed;
              color: #999;
            }
          }
        }
        .monitoring-status {
          position: relative;
          padding-left: 8px;
          &::before {
            content: '';
            width: 4px;
            height: 4px;
            position: absolute;
            left: 0;
            top: 6px;
            border-radius: 50%;
            background-color: #FD8546;
          }
        }
        .stop-status {
          position: relative;
          padding-left: 8px;
          &::before {
            content: '';
            width: 4px;
            height: 4px;
            position: absolute;
            left: 0;
            top: 6px;
            border-radius: 50%;
            background-color: #999;
          }
        }
      }
      .data-row-content {
        height: 40px;
        color: #333;
        display: flex;
        align-items: center;
        .data-row-item {
          flex: 1;
          img {
            width: 14px;
            height: 14px;
            margin: 0 4px -2px
          }
          .link-button {
            margin-left: 0;
            font-size: 14px;
          }
        }
      }
      &::v-deep {
        .el-avatar--circle {
          border: 2px solid #fff;
        }
      }
    }
  }
  .label {
    color: #999;
  }
  .link {
    color: #406eff;
    margin-left: 12px;
    cursor: pointer;
  }
  .light-word{
    color: #406eff;
  }
  .set {
    line-height: 16px;
  }
  .warning {
    color: red;
  }
}
.mobile-detail-wrap {
  .account-detail {
    padding: 12px;
    margin: 12px;
    border-radius: 6px;
  }
  .account-info {
    display: block;
    height: auto !important;
    padding: 0;
    background: #fff;
    .account-left {
      padding: 0;
      .account-avatar {
        width: 48px;
        height: 48px;
      }
    }
    .account-right {
      line-height: 32px;
      background: #FAFAFC;
      padding: 0 12px;
      margin-top: 12px;
    }
  }
  .mobile-link-info {
    max-width: unset !important;
    flex: 1 !important;
    overflow: hidden !important;
  }
  .account-left, .account-right, .data-row-item {
    width: 100% !important;
  }
  .data-row-header {
    .set {
      flex: 1 !important;
      text-align: right !important;
      margin-right: 16px;
      font-weight: bold;
    }
  }
  .data-row {
    margin: 10px 0 0;
    .mobile-row-item-1, .mobile-row-item-3 {
      .data-row-header {
        margin-bottom: 0 !important;
      }
    }
    .mobile-row-item-1 {
      margin-bottom: 16px !important;
    }
    .mobile-row-item-2 {
      margin-bottom: 28px !important;
    }
    .mobile-row-item-3 {
      margin-bottom: 4px !important;
    }
  }
  .data-row-item {
    display: flex;
    align-items: center;
    .link-button {
      flex: 1;
      text-align: right;
      font-weight: bold;
    }
  }
  .data-row-content {
    display: block !important;
    height: unset !important;
  }
  .data-row {
    display: block;
    .row-item {
      width: 100%;
      margin-bottom: 12px;
    }
  }
  .account-right {
    ::v-deep .el-col {
      width: 100% !important;
    }
    div, span {
      white-space: nowrap;
    }
  }
}
</style>
<style lang="scss">
.el-dropdown-menu.custom-disabled{
  display: none !important;
}
</style>
